<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse accordion value="0">
          <Panel>
            地球球体
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="贴图">
                  <Select :transfer="true" size="small" v-model="chartOption.globe.baseTexture">
                    <Option v-for="item in btImages" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="凹凸度">
                  <InputNumber size="small" :max="0.5" :min="0" :step="0.01" v-model="chartOption.globe.displacementScale"></InputNumber>
                </FormItem>
                <FormItem label="色调">
                  <PnColorPicker size="small" v-model="chartOption.globe.light.color" alpha recommend/>
                </FormItem>
                <FormItemPanel title="镜头配置">
                  <FormItem label="自转">
                    <i-switch v-model="chartOption.globe.viewControl.autoRotate">
                      <span slot="open"></span>
                      <span slot="close"></span>
                    </i-switch>
                  </FormItem>
                  <FormItem label="自转方向">
                    <Select :transfer="true" size="small" v-model="chartOption.globe.viewControl.autoRotateDirection">
                      <Option v-for="item in autoRotateDirections" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="自转速度">
                    <InputNumber size="small" :max="100" :min="1" v-model="chartOption.globe.viewControl.autoRotateSpeed"></InputNumber>
                  </FormItem>
                  <FormItem label="镜头距离">
                    <Slider size="small" show-input v-model="chartOption.globe.viewControl.distance" :max="400" :min="40" :step="10"></Slider>
                  </FormItem>
                  <FormItem label="水平旋转">
                    <Slider size="small" show-input v-model="chartOption.globe.viewControl.beta" :max="90" :min="-90" :step="10"></Slider>
                  </FormItem>
                  <FormItem label="上下旋转">
                    <Slider size="small" show-input v-model="chartOption.globe.viewControl.alpha" :max="90" :min="-90" :step="5"></Slider>
                  </FormItem>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel>
            飞线层
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="速度">
                  <InputNumber size="small" :max="400" :min="100" :step="50" v-model="chartOption.lines3D.effect.constantSpeed"></InputNumber>
                </FormItem>
                <FormItem label="飞线颜色">
                  <PnColorPicker size="small" v-model="chartOption.lines3D.lineStyle.color" alpha recommend/>
                </FormItem>
                <FormItem label="飞线线宽">
                  <InputNumber size="small" :max="2" :min="0.1" :step="0.1" v-model="chartOption.lines3D.lineStyle.width"></InputNumber>
                </FormItem>
                <FormItem label="飞线透明度">
                  <InputNumber size="small" :max="1" :min="0.1" :step="0.1" v-model="chartOption.lines3D.lineStyle.opacity"></InputNumber>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            散点层
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="散点颜色">
                  <PnColorPicker size="small" v-model="chartOption.scatter3D.itemStyle.color" alpha recommend/>
                </FormItem>
                <FormItem label="散点透明度">
                  <InputNumber size="small" :max="1" :min="0.1" :step="0.1" v-model="chartOption.scatter3D.itemStyle.opacity"></InputNumber>
                </FormItem>

                <FormItemPanel title="视觉映射配置">
                  <FormItem label="最小值">
                    <InputNumber size="small" :max="1000000" :min="0" v-model="chartOption.visualMap[0].min"></InputNumber>
                  </FormItem>
                  <FormItem label="最大值">
                    <InputNumber size="small" :max="1000000" :min="0" v-model="chartOption.visualMap[0].max"></InputNumber>
                  </FormItem>
                  <FormItem label="最小值散点大小">
                    <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.visualMap[0].minSymbolSize"></InputNumber>
                  </FormItem>
                  <FormItem label="最大值散点大小">
                    <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.visualMap[0].maxSymbolSize"></InputNumber>
                  </FormItem>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel v-if="chartOption.title">
            标题
            <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
            <div slot="content">
              <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
            </div>
          </Panel>
        </Collapse>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <Alert type="warning" show-icon>本组件暂不支持CSV数据源</Alert>
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="Earth3DChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'Earth3DChartForm', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompFormMixin],
    data() {
      return {
        btImages: [
          {label: '地形', value: 'baseTexture.jpg'},
          {label: '卫星', value: 'baseTexture2.jpg'},
          {label: '区块', value: 'baseTexture3.png'},
          {label: '粒子', value: 'baseTexture4.png'},
        ],
        autoRotateDirections: [
          {label: '顺时针', value: 'cw'},
          {label: '逆时针', value: 'ccw'},
        ]
      }
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
